<template>
	<div class="attraction-detail">
		<Header />
		<div class="detail-container">
			<el-button type="text" icon="el-icon-arrow-left" @click="$router.go(-1)"
				class="back-button">返回景点列表</el-button>

			<div class="detail-content">
				<div class="detail-header">
					<h1>{{ attraction.name }}</h1>
					<el-divider></el-divider>
				</div>

				<div class="detail-body">
					<div class="detail-image">
						<img :src="attraction.image" :alt="attraction.name" />
					</div>

					<div class="detail-info">
						<h3>景点介绍</h3>
						<p>{{ attraction.content }}</p>

						<h3>开放时间</h3>
						<p>{{ attraction.openingHours }}</p>

						<h3>门票价格</h3>
						<p>{{ attraction.ticketPrice }}</p>

						<h3>交通指南</h3>
						<p>{{ attraction.transportation }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/Header.vue'

	export default {
		name: 'AttractionDetail',
		components: {
			Header
		},
		props: {
			id: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				attraction: {
						name: '',
						content: '',
						openingHours: '',
						ticketPrice: '',
						transportation: ''
					}
			}
		},
		mounted() {	
			this.$http.get("userApi/attractions/findById?id="+this.id).then((resp) => {
				if (resp.data.code == 200) {
					this.attraction = resp.data.data;
				} 
			})

		},
		computed: {
			attractionData() {
				return this.attractions[this.id] || {}
			}
		}
	}
</script>

<style scoped>
	.attraction-detail {
		padding-top: 60px;
	}

	.detail-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

	.back-button {
		margin-bottom: 20px;
	}

	.detail-content {
		background: white;
		border-radius: 8px;
		padding: 30px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.detail-header h1 {
		color: #2c3e50;
		margin: 0;
	}

	.detail-body {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30px;
	}

	.detail-image {
		flex: 1;
		min-width: 300px;
	}

	.detail-image img {
		width: 100%;
		border-radius: 8px;
	}

	.detail-info {
		flex: 1;
		min-width: 300px;
		padding: 0 30px;
	}

	.detail-info h3 {
		color: #2c3e50;
		margin: 20px 0 10px;
	}

	.detail-info p {
		color: #34495e;
		line-height: 1.6;
	}

	@media (max-width: 768px) {
		.detail-body {
			flex-direction: column;
		}

		.detail-info {
			padding: 20px 0 0;
		}
	}
</style>